<template>
    <div style="padding: 0% 1%; color: #0099ff; height: 100%">
        <div style="padding: 1% 0;">
            <a-breadcrumb>
                <a-breadcrumb-item>系统管理</a-breadcrumb-item>
                <a-breadcrumb-item>菜单管理</a-breadcrumb-item>
            </a-breadcrumb>
        </div>
        <a-form-model :model="menuForm" ref="ruleMenuForm"
                      layout="inline" style="padding-top: 1%">
            <a-row :gutter="24">
                <a-col :span="9">
                    <a-form-model-item label="菜单名称" prop="menuName">
                        <a-input v-model="menuForm.menuName"></a-input>
                    </a-form-model-item>
                </a-col>
                <a-col :span="9">
                    <a-form-model-item label="菜单编号" prop="menuCode">
                        <a-input v-model="menuForm.menuCode"></a-input>
                    </a-form-model-item>
                </a-col>
                <a-col :span="6">
                    <a-form-model-item :style="{ textAlign: 'right'}">
                        <a-button type="primary" @click="queryMenuList()" :loading="loading">查询</a-button>
                        <a-button @click="restMenuForm()" style="margin-left: 10px;">重置</a-button>
                        <a-button type="primary" style="margin-left: 10px;" @click="showAddForm">新增</a-button>
                    </a-form-model-item>
                </a-col>
            </a-row>
        </a-form-model>
        <div style="padding-top: 2%; overflow-y:auto;height: 80%">
            <a-table :columns="columns" :data-source="menuData" :rowKey='record=>record.id' :pagination="false">
            <span slot="action" slot-scope="text, record">
                <a @click="showUpdateForm(text,record)">修改</a>
                <a-popconfirm
                    title="是否确认删除?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="confirm(record.id)"
                    @cancel="cancel"
                >
                    <a style="padding-left: 10px">删除</a>
                </a-popconfirm>
            </span>
            </a-table>
            <a-pagination
                v-model="current"
                :page-size-options="pageSizeOptions"
                :total="total"
                show-size-changer
                :page-size="pageSize"
                @change="changePageNum"
                @showSizeChange="onShowSizeChange"
                style="textAlign:right"
            >
                <template slot="buildOptionText" slot-scope="props">
                    <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                    <span v-if="props.value === '50'">全部</span>
                </template>
            </a-pagination>
        </div>
        <div>
            <a-modal
                title="新增菜单"
                :visible="addVisible"
                :confirm-loading="confirmLoading"
                @ok="handleAdd()"
                @cancel="handleAddCancel"
            >
                <a-form-model :model="addMenuForm" :label-col="{span: 6}" :wrapper-col="{span: 12}" ref="menuAddRule"
                              :rules="rules">
                    <a-form-model-item label="菜单名称" prop="menuName">
                        <a-input placeholder="菜单名称" v-model="addMenuForm.menuName"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单编号" prop="menuCode">
                        <a-input placeholder="菜单编号" v-model="addMenuForm.menuCode"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单地址" prop="menuUrl">
                        <a-input placeholder="菜单地址" v-model="addMenuForm.menuUrl"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单图标" prop="menuIcon">
                        <a-input placeholder="菜单图标" v-model="addMenuForm.menuIcon"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单序号" prop="menuOrder">
                        <a-input placeholder="菜单序号" v-model="addMenuForm.menuOrder"/>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
        <div>
            <a-modal
                title="修改菜单"
                :visible="updateVisible"
                :confirm-loading="confirmLoading"
                @ok="handleUpdate()"
                @cancel="handleAddCancel"
            >
                <a-form-model :model="updateMenuForm" :label-col="{span: 6}" :wrapper-col="{span: 12}"
                              ref="menuUpdateRule"
                              :rules="updateRules">
                    <a-input placeholder="菜单名称" v-model="updateMenuForm.id" hidden/>
                    <a-form-model-item label="菜单名称" prop="menuName">
                        <a-input placeholder="菜单名称" v-model="updateMenuForm.menuName"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单编号" prop="menuCode">
                        <a-input placeholder="菜单编号" v-model="updateMenuForm.menuCode"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单地址" prop="menuUrl">
                        <a-input placeholder="菜单地址" v-model="updateMenuForm.menuUrl"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单图标" prop="menuIcon">
                        <a-input placeholder="菜单图标" v-model="updateMenuForm.menuIcon"/>
                    </a-form-model-item>
                    <a-form-model-item label="菜单序号" prop="menuOrder">
                        <a-input placeholder="菜单序号" v-model="updateMenuForm.menuOrder"/>
                    </a-form-model-item>
                </a-form-model>
            </a-modal>
        </div>
    </div>
</template>

<script>
import service from "@/utils/axios";
import {queryUrl} from "@/lib/global";

const columns = [
    {
        dataIndex: "id",
        key: 'id',
        width: 0,
        ellipsis: true,
    }, {
        title: '菜单名称',
        dataIndex: "menuName",
        key: 'menuName',
    }, {
        title: '菜单编号',
        dataIndex: "menuCode",
        key: 'menuCode',
    }, {
        title: '菜单地址',
        dataIndex: "menuUrl",
        key: 'menuUrl',
    }, {
        title: '菜单排序',
        dataIndex: "menuOrder",
        key: 'menuOrder',
    }, {
        title: '操作',
        key: 'action',
        scopedSlots: {customRender: 'action'},
    },
]
export default {
    name: "menulist.vue",
    data() {
        return {
            menuData: [],
            columns,
            pageSizeOptions: ['10', '20', '30', '40', '50'],
            current: 1,
            pageSize: 10,
            total: 0,
            pageNum: 1,
            menuForm: {
                menuName: null,
                menuCode: null
            },
            addMenuForm: {
                menuName: null,
                menuCode: null,
                menuUrl: null,
                menuIcon: null,
                menuOrder: null,
            },
            updateMenuForm: {
                id: null,
                menuName: null,
                menuCode: null,
                menuUrl: null,
                menuIcon: null,
                menuOrder: null,
            },
            addVisible: false,
            updateVisible: false,
            loading: false,
            confirmLoading: false,
            rules: {
                menuName: [
                    {required: true, message: '请输入菜单名称', trigger: 'blur'},
                    {validator: this.checkMenuName}
                ],
                menuCode: [
                    {required: true, message: '请输入菜单编号', trigger: 'blur'},
                    {validator: this.checkMenuCode}
                ],
                menuUrl: [
                    {required: true, message: '请输入菜单地址', trigger: 'blur'},
                    {validator: this.checkMenuUrl}
                ],
            },
            updateRules: {
                menuName: [
                    {required: true, message: '请输入菜单名称', trigger: 'blur'},
                    {validator: this.checkUpdateMenuName}
                ],
                menuCode: [
                    {required: true, message: '请输入菜单编号', trigger: 'blur'},
                    {validator: this.checkUpdateMenuCode}
                ],
                menuUrl: [
                    {required: true, message: '请输入菜单地址', trigger: 'blur'},
                    {validator: this.checkUpdateMenuUrl}
                ],
            }
        }
    },
    created() {
        this.queryMenuList();
    },
    methods: {
        changePageNum(current) {
            this.pageNum = current;
            this.queryMenuList();
        },
        onShowSizeChange(current, pageSize) {
            this.pageSize = pageSize;
            this.pageNum = current;
            this.queryMenuList();
        },
        queryMenuList() {
            this.loading = true;
            let url = this.queryUrl + "menu/queryMenuPage";
            let data = {
                menuName: this.menuForm.menuName,
                menuCode: this.menuForm.menuCode,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            };
            service.get(url, {params: data}).then(response => {
                if (response && response.data) {
                    if (response.data.resCode === 0) {
                        this.$message.info(response.data.resMsg);
                        this.menuData = response.data.data.list;
                        this.current = response.data.data.pageNum;
                        this.pageSize = response.data.data.pageSize;
                        this.total = response.data.data.total;
                    } else {
                        this.$message.error(response.data.resMsg);
                    }
                }
            })
            this.loading = false;
        },
        restMenuForm() {
            this.$refs.ruleMenuForm.resetFields();
        },
        showAddForm() {
            this.addVisible = true;
        },
        showUpdateForm(record) {
            this.updateVisible = true;
            this.updateMenuForm = record;
        },
        confirm(index) {
            let url = this.queryUrl + 'menu/updateMenu';
            let data = {
                id: index,
                deleteFlag: 1
            }
            service.post(url, data).then(response => {
                if (response && response.data) {
                    if (response.data.resCode === 0) {
                        this.$message.success(response.data.resMsg);
                    } else {
                        this.$message.error(response.data.resMsg);
                    }
                }
            })
        },
        cancel(e) {
            console.log(e);
            this.$message.error('Click on No');
        },
        handleAdd() {
            let url = queryUrl + "menu/addMenu";
            let data = this.addMenuForm;
            // this.$refs.menuAddRule.validate(valid => {
            //     if (valid) {
                    this.confirmLoading = true;
                    service.post(url, data).then(response => {
                        if (response && response.data) {
                            if (response.data.resCode === 0) {
                                this.$message.success(response.data.resMsg);
                            } else {
                                this.$message.error(response.data.resMsg);
                            }
                        }
                    })
                    this.confirmLoading = false;
                    this.addVisible = false;
                    this.updateVisible = false;
                // }
            // })
        },
        handleUpdate() {
            let url = queryUrl + "menu/updateMenu";
            let data = this.updateMenuForm;
            // this.$refs.menuUpdateRule.validate(valid => {
            //     if (valid) {
                    this.confirmLoading = true;
                    service.post(url, data).then(response => {
                        if (response && response.data) {
                            if (response.data.resCode === 0) {
                                this.$message.success(response.data.resMsg);
                            } else {
                                this.$message.error(response.data.resMsg);
                            }
                        }
                    });
                    this.confirmLoading = false;
                    this.addVisible = false;
                    this.updateVisible = false;
                // }
            // })
        },
        handleAddCancel() {
            this.addVisible = false;
            this.updateVisible = false;
        },
        checkMenuName(rule, value, callback) {
            let url = this.queryUrl + "menu/queryMenuExactly";
            let data = {
                menuName: value
            }
            service.get(url, {params: data}).then(response => {
                if (response && response.data && response.data.data) {
                    if (response.data.data.length > 0) {
                        callback("菜单名称已经被使用");
                    }
                } else {
                    callback();
                }
            })
        },
        checkMenuCode(rule, value, callback) {
            let url = this.queryUrl + "menu/queryMenuExactly";
            let data = {
                menuCode: value
            }
            service.get(url, {params: data}).then(response => {
                if (response && response.data && response.data.data) {
                    if (response.data.data.length > 0) {
                        callback("菜单编号已经被使用");
                    }
                } else {
                    callback();
                }
            })
        },
        checkMenuUrl(rule, value, callback) {
            let url = this.queryUrl + "menu/queryMenuExactly";
            let data = {
                menuUrl: value
            }
            service.get(url, {params: data}).then(response => {
                if (response && response.data && response.data.data) {
                    if (response.data.data.length > 0) {
                        callback("菜单地址已经被使用");
                    }
                } else {
                    callback();
                }
            })
        },
        checkUpdateMenuName(rule, value, callback) {
            let url = this.queryUrl + "menu/queryMenuExactly";
            let data = {
                menuName: value
            }
            service.get(url, {params: data}).then(response => {
                if (response && response.data && response.data.data) {
                    if (response.data.data.length > 0) {
                        let id = this.updateMenuForm.id;
                        let array = response.data.data;
                        for (let i = 0; i < array.length; i++) {
                            if (id && array[i].id !== id) {
                                callback("菜单名称已经被使用");
                            }
                        }
                    }
                } else {
                    callback();
                }
            })
        },
        checkUpdateMenuCode(rule, value, callback) {
            let url = this.queryUrl + "menu/queryMenuExactly";
            let data = {
                menuCode: value
            }
            service.get(url, {params: data}).then(response => {
                if (response && response.data && response.data.data) {
                    if (response.data.data.length > 0) {
                        let id = this.updateMenuForm.id;
                        let array = response.data.data;
                        for (let i = 0; i < array.length; i++) {
                            if (id && array[i].id !== id) {
                                callback("菜单编号已经被使用");
                            }
                        }
                    }
                } else {
                    callback();
                }
            })
        },
        checkUpdateMenuUrl(rule, value, callback) {
            let url = this.queryUrl + "menu/queryMenuExactly";
            let data = {
                menuUrl: value
            }
            service.get(url, {params: data}).then(response => {
                if (response && response.data && response.data.data) {
                    if (response.data.data.length > 0) {
                        let id = this.updateMenuForm.id;
                        let array = response.data.data;
                        for (let i = 0; i < array.length; i++) {
                            if (id && array[i].id !== id) {
                                callback("菜单地址已经被使用");
                            }
                        }
                    }
                } else {
                    callback();
                }
            })
        }
    }
}
</script>
<style scoped>
</style>
